<template>
    <div>
        <el-form  ref="formRef" :rules="rules" :model="user" label-width="88px">
            <h2 class="title">用户注册</h2>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username" placeholder="请输入用户名" prefix-icon="user"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="user.email" placeholder="请输入邮箱" prefix-icon="message"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="user.password" placeholder="请输入密码" prefix-icon="lock" type="password"></el-input>
            </el-form-item>
            <el-form-item label>
                <el-button type="primary" @click="doReg">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { User } from '../../types'
import { register } from '../../api'
import { ref,computed } from 'vue'

import { useUserStore } from '../../store/user'
const useStore = useUserStore();
const { setUser } = useStore;  

const router = useRouter()
const user = ref<User>(
    {
        email: '',
        username: '',
        password: '',
    }
)
const formRef = ref()
const rules = computed(() => {
    return {
        email: {
            required: true,
            message: '邮箱不能为空！',
            trigger: [
                'blur'
            ]
        },
        password: {
            required: true,
            min: 6,
            message: '密码长度至少 6 位',
            trigger: [
                'blur'
            ]
        }
    }
})

const open = (message: any) => {
    ElMessage.error(message)
}
const doReg = async () => {
    formRef.value.validate(async (valid: any) => {
        if (!valid) return
        try {
            const res = await register({user: user.value})
            setUser(res.data.user)
            router.push({name: 'Home'})
        } catch (error: any) {
            open(error.message)
        }
    })
}

</script>

<style scoped>
.title{
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;

}
</style>